<template>
    <div class="detail_page" v-if="showDetail">
      <div class="left_con" v-if="!hideLeft">
        <div class="top_title">
          <a-breadcrumb separator=">" class="breadcrumb">
            <a-breadcrumb-item @click="$router.push({ name: 'AiDraw' })">
              <a class="pointer">首页</a>
            </a-breadcrumb-item>
            <a-breadcrumb-item @click="$router.push({ name: 'SceneClassify' })">
              <a class="pointer">分类页</a>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              <a class="pointer">详情页</a>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="search_con">
          <a-input-search
            v-model:value="pageInfo.title"
            placeholder="请输入搜索内容"
            style="width: 100%; padding: 4px 15px"
            @search="searchThis"
          />
        </div>
  
        <div class="tab_con">
          <div
            class="tab_item"
            @click="tabChange(index)"
            :class="imageTabIndex == index ? 'active' : ''"
            v-for="(item, index) in tabList"
            :key="index"
          >
            {{ item.tab_name }}
          </div>
        </div>
  
        <div
          class="tab_main"
          v-if="modelList.length > 0"
          @scroll="handleScrollChange"
        >
          <template v-for="item in modelList" :key="item.id">
            <!-- 适配webp -->
            <div
              v-if="item.images && item.images[0] && item.images[0].webp"
              class="image_item"
              @click="makeSame(item)"
              :style="{ backgroundImage: 'url(' + item.images[0].webp + ')' }"
            >
              <div class="operate_image">
                <div class="image_title">
                  <a-tooltip placement="topLeft">
                    <template #title>{{ item.title }}</template>
                    {{ item.title }}
                  </a-tooltip>
                </div>
  
                <div
                  shape="circle"
                  class="download_this"
                  size="small"
                  danger
                  @click.stop="downloadThis(item)"
                >
                  <VerticalAlignBottomOutlined v-if="!downloadIng" />
                  <LoadingOutlined v-else />
                </div>
  
                <div
                  v-if="imageTabIndex == 0"
                  @click.stop="collectClick(item)"
                  shape="circle"
                  class="my_collect"
                  size="small"
                  danger
                >
                  <HeartFilled
                    v-if="item.collect && $store.getters.isLogin"
                    style="color: red"
                  />
                  <HeartOutlined v-else />
                </div>
  
                <div
                  v-if="imageTabIndex == 1 || imageTabIndex == 2"
                  shape="circle"
                  class="delete_collect"
                  type="default"
                  size="small"
                  danger
                  @click.stop="deleteCollect(item)"
                >
                  <DeleteOutlined />
                </div>
                <a-button
                  class="make_same"
                  size="small"
                  type="primary"
                  @click.stop="makeSame(item)"
                  >创作
                </a-button>
              </div>
            </div>
  
            <div
              v-else-if="item.images && item.images[0] && item.images[0].uri"
              class="image_item"
              @click="makeSame(item)"
              :style="{ backgroundImage: 'url(' + item.images[0].uri + ')' }"
            >
              <div class="operate_image">
                <div class="image_title">
                  <a-tooltip placement="topLeft">
                    <template #title>{{ item.title }}</template>
                    {{ item.title }}
                  </a-tooltip>
                </div>
  
                <div
                  shape="circle"
                  class="download_this"
                  size="small"
                  danger
                  @click.stop="downloadThis(item)"
                >
                  <VerticalAlignBottomOutlined v-if="!downloadIng" />
                  <LoadingOutlined v-else />
                </div>
  
                <div
                  v-if="imageTabIndex == 0"
                  @click.stop="collectClick(item)"
                  shape="circle"
                  class="my_collect"
                  size="small"
                  danger
                >
                  <HeartFilled
                    v-if="item.collect && $store.getters.isLogin"
                    style="color: red"
                  />
                  <HeartOutlined v-else />
                </div>
  
                <div
                  v-if="imageTabIndex == 1 || imageTabIndex == 2"
                  shape="circle"
                  class="delete_collect"
                  type="default"
                  size="small"
                  danger
                  @click.stop="deleteCollect(item)"
                >
                  <DeleteOutlined />
                </div>
                <a-button
                  class="make_same"
                  size="small"
                  type="primary"
                  @click.stop="makeSame(item)"
                  >创作
                </a-button>
              </div>
            </div>
            <div
              v-else-if="item.images && item.images.length == 0"
              class="image_item relative"
            >
              <div class="image_item_img">{{ judgeStatus(item.status) }}</div>
              <div class="operate_image-cover">
                <div
                  shape="circle"
                  class="delete_collect"
                  type="default"
                  size="small"
                  danger
                  @click.stop="deleteCollect(item)"
                >
                  <DeleteOutlined />
                </div>
              </div>
            </div>
          </template>
          <template v-if="noMore">
            <div class="no_data" style="margin-top: 30px">--暂无更多数据--</div>
          </template>
  
          <template v-if="modelLoading">
            <span
              style="
                margin-top: 5px;
                width: 100%;
                text-align: center;
                margin: 10px 0;
                color: #999999;
              "
              >数据加载中...</span
            >
          </template>
        </div>
  
        <div class="tab_main" v-if="modelList.length == 0 && !modelLoading">
          <div class="no_data">暂无数据</div>
        </div>
  
        <div
          class="tab_main"
          v-if="modelList.length == 0 && modelLoading && pageInfo.page == 1"
        >
          <div class="model_loading">
            <LoadingOutlined style="font-size: 16px" />
            <span style="margin-top: 5px">数据加载中...</span>
          </div>
        </div>
      </div>
  
      <div class="middle_con" v-if="!imageLoading" :style="middleConStyle">
        <div class="middle_top" :style="middleTopStyle">
          <div
            class="main_image"
            v-if="
              (outputImages[currentOutIndex] ||
                (caseInfo.images && caseInfo.images[0].origin_uri)) &&
              caseInfo.id
            "
          >
            <img
              v-if="currentTab == 'sd'"
              :style="{
                width:
                  hideLeft && fitWidth && outputImages.length == 0
                    ? '65%'
                    : hideLeft && fitWidth && outputImages.length > 0
                    ? '60%'
                    : !hideLeft && fitWidth && outputImages.length == 0
                    ? '76%'
                    : !hideLeft && fitWidth && outputImages.length > 0
                    ? '73%'
                    : 'auto',
                height: ' 100%',
                objectFit: 'cover',
              }"
              :src="imgObj"
              alt="图片加载中..."
            />
  
            <a-carousel
              v-else
              arrows
              :key="carouselKey"
              style="width: 60%; height: 100%"
              :after-change="onChange"
            >
              <img
                class="carousel-item-img"
                :class="
                  caseInfo.aspect_ratio == '9:16' ||
                  caseInfo.aspect_ratio == '16:9'
                    ? 'carousel-objectFit'
                    : ''
                "
                :src="img.url"
                :key="aIndex"
                v-for="(img, aIndex) in caseInfo.third_image"
              />
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; zindex: 1">
                  <left-circle-outlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <RightCircleOutlined />
                </div>
              </template>
            </a-carousel>
            <div class="right_operate" v-if="caseInfo.id">
              <div class="download_image">
                <VerticalAlignBottomOutlined
                  v-if="!downloadIng"
                  @click.stop="
                    downloadThis({
                      id: caseInfo.id,
                      images:
                        outputImages.length > 0 ? outputImages : caseInfo.images,
                    })
                  "
                />
                <LoadingOutlined v-else />
              </div>
              <div class="collect_image" @click.stop="collectSingleClick()">
                <HeartFilled
                  v-if="caseInfo.collect && $store.getters.isLogin"
                  style="color: red"
                />
  
                <HeartOutlined v-else />
              </div>
            </div>
          </div>
  
          <div class="main_image" v-else>
            <div class="image_container">
              <img
                :src="defaultImg"
                alt=""
              />
              <div class="title">生成的图片将会显示在这里</div>
              <div class="desc">请在右侧输入创意，生成你的作品吧</div>
            </div>
          </div>
        </div>
        <!-- <a-spin :spinning="tLoading"> 
         <div v-if="caseInfo.platform&&caseInfo.platform.api=='midjourney'" class="page-wrapper">
      
          <div class="page-list">
           
            <a-button class="page-item" @click="pageChange(tIndex)" :class="currentPage==tIndex?'active-page':''" v-for="(tImg,tIndex) in 5" :key="tIndex">
                  {{ tIndex==0?'原图':tIndex}}
                </a-button>
          </div>
       
          </div>
        </a-spin> -->
  
        <a-spin
          :spinning="tLoading"
          v-if="caseInfo.platform && caseInfo.platform.api == 'midjourney'"
        >
          <div class="operation">
            <div class="magnify">
              <div class="color-purple">放大：</div>
              <a-button @click="biggerImage(1)">左上</a-button>
              <a-button @click="biggerImage(2)">右上</a-button>
              <a-button @click="biggerImage(3)">左下</a-button>
              <a-button @click="biggerImage(4)">右下</a-button>
            </div>
            <div class="trimming mt-10">
              <div class="color-purple">微调：</div>
              <a-button @click="adjustImage(1)">左上</a-button>
              <a-button @click="adjustImage(2)">右上</a-button>
              <a-button @click="adjustImage(3)">左下</a-button>
              <a-button @click="adjustImage(4)">右下</a-button>
            </div>
          </div>
        </a-spin>
  
        <!-- <div class="middle_bottom" v-if="outputImages.length > 0">
          <div
            class="image_item"
            @click="currentOutIndex = index"
            v-for="(item, index) in outputImages"
            :key="index"
            :style="{ backgroundImage: 'url(' + item + ')' }"
          >
            <div v-if="index == currentOutIndex" class="choose_image">
              <CheckOutlined style="margin-left: 3px; margin-bottom: 3px" />
            </div>
          </div>
        </div> -->
      </div>
  
      <div
        class="middle_con"
        :style="middleConStyle"
        style="display: flex; align-items: center; justify-content: center"
        v-else
      >
        <div class="loading_txt">
          <span style="z-index: 9; position: absolute; width: 120px; left: 0"
            >数据请求中...</span
          >
        </div>
      </div>
  
      <div class="right_con" :style="rightConStyle">
        <div class="loading_view" v-if="paramsLoading">
          <LoadingOutlined />
          <span style="margin-top: 7px">数据加载中...</span>
        </div>
  
        <div class="loading_view" v-if="noParamsList">暂无数据</div>
  
        <div class="right_top" v-if="!noParamsList">
          <div class="tab-list">
            <div
              class="tab-sd"
              @click="modeTabChange('sd')"
              :class="currentTab == 'sd' ? 'active-tab' : ''"
            >
              SD模型
            </div>
            <div
              class="tab-mj"
              @click="modeTabChange('mj')"
              :class="currentTab == 'mj' ? 'active-tab' : ''"
            >
              MJ模型
            </div>
          </div>
          <!-- 默认参数 -->
          <div class="normal_params_con" v-if="normalParams.length > 0">
            <!-- 选择风格 -->
  
            <choosePaintStyle
              v-if="styleModelList.length > 0"
              :styleModelList="styleModelList"
              :styleIndex="styleIndex"
              :expandStyle="expandStyle"
              @chooseStyle="chooseStyle"
              @changeStatus="expandStyle = !expandStyle"
            />
            <div
              class="form_item"
              v-for="(item, index) in normalParams"
              :key="index"
            >
              <div class="form_title">
                <div class="left_title">
                  <span
                    v-if="item.is_required"
                    style="color: red; margin-right: 3px"
                    >*</span
                  >{{ item.input_name }}
                </div>
                <a-tooltip placement="left">
                  <template #title>
                    {{ item.param_intro }}
                  </template>
                  <QuestionCircleOutlined v-if="item.param_intro" />
                </a-tooltip>
              </div>
  
              <div
                class="form_value"
                style="position: relative"
                v-if="
                  item.param_name == 'prompt' ||
                  item.param_name == 'prompts' ||
                  item.param_name == 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <div class="text_area_con">
                  <a-textarea
                    style="
                      border: none;
                      background-color: #f6f7f9;
                      border-radius: 10px;
                    "
                    @change="(value) => inputChange(value, item.param_name)"
                    :auto-size="{
                      minRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                      maxRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                    }"
                    v-model:value="normalParams[index].param_varlue"
                    :placeholder="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                        ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                        : '请输入'
                    "
                  />
  
                  <div
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                    class="textarea_bottom"
                  >
                    <a-button
                      v-if="currentTab == 'sd'"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="vocabularyVisible = true"
                      >推荐词</a-button
                    >
                    <a-button
                      v-else
                      :loading="btnLoading"
                      :disabled="!normalParams[index].param_varlue"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="getPrompts(normalParams[index])"
                      >提示词生成</a-button
                    >
                    <a style="color: #999" @click="clearPrompt">清空</a>
                  </div>
                </div>
                <template v-if="currentTab == 'sd'">
                  <div
                    class="bottom_tips"
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                  >
                    <div style="display: flex; align-items: center">
                      <span style="font-size: 12px">示范:</span>
                      <span class="prompt_title" v-if="promptTitle.length > 0">
                        <a
                          class="a_link"
                          @click="chooseRecommad(prom_item)"
                          v-for="(prom_item, prom_index) in promptTitle"
                          :key="prom_index"
                          >{{ prom_item.title }}</a
                        >
                      </span>
                    </div>
                    <RedoOutlined
                      class="refrash_icon"
                      @click="getPromptList"
                      :class="loadPrompt ? 'prompt_loading' : ''"
                    />
                  </div>
                </template>
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'text' &&
                  item.param_name != 'prompt' &&
                  item.param_name != 'prompts' &&
                  item.param_name != 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <a-input
                  v-model:value="normalParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
              </div>
  
              <div class="form_value" v-if="item.input_type == 'number'">
                <!-- 数字文本框 -->
                <a-input-number
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : undefined"
                  :max="item.max * 1 ? item.max * 1 : undefined"
                  v-model:value="normalParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
                <a-slider
                  v-if="item.step && item.min && item.max"
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : 0"
                  :max="item.max * 1 ? item.max * 1 : 0"
                  style="margin-top: 5px"
                  v-model:value="normalParams[index].param_varlue"
                />
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' &&
                  item.param_name != 'is_niji' &&
                  item.param_name != 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <a-select
                  v-model:value="normalParams[index].param_varlue"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <a-select-option
                    v-for="(select_item, select_index) in item.allow_value"
                    :value="select_item"
                    :key="select_index"
                    >{{ select_item }}</a-select-option
                  >
                </a-select>
              </div>
              <!-- 特殊处理选择框 -->
              <div
                class="form_value"
                v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
              >
                <div class="style-list-niji">
                  <div
                    class="style-item"
                    :class="
                      normalParams[index].param_varlue == val
                        ? 'active-style'
                        : ''
                    "
                    @click="selectNiji(item, val)"
                    v-for="(val, tIndex) in normalParams[index].allow_value"
                    :key="tIndex"
                  >
                    <div
                      class="move-box"
                      v-if="normalParams[index].param_varlue == val"
                    ></div>
                    <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                    <img :src="mj_bg" v-else class="example_img" />
                    <div class="item-bottom-niji">
                      <span class="text-blod">{{
                        val == "否" ? "Midjourney" : "Niji"
                      }}</span>
                      <span class="text-cut">{{
                        val == "否" ? "真实感强" : "卡通动漫"
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' && item.param_name == 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <div class="scale-list">
                  <div
                    class="scale-item"
                    :class="item.param_varlue == tItem ? 'br-purple' : ''"
                    @click="changeScaleMode(item, tItem)"
                    v-for="(tItem, tIndex) in item.allow_value"
                    :key="tIndex"
                  >
                    <div
                      :class="
                        item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                      "
                      class="scale-mode"
                      :style="getWHStyle(tItem)"
                    ></div>
                    <span
                      class="margin-top-xs"
                      :class="
                        item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                      "
                      >{{ tItem }}</span
                    >
                  </div>
                </div>
              </div>
  
              <div class="form_value" v-if="item.input_type == 'file'">
                <!-- 文件 -->
                <a-upload-dragger
                  v-model:file-list="fileList"
                  name="image"
                  :show-upload-list="false"
                  :action="$utils.imgAction"
                  :headers="{ 'org-token': $store.getters.token }"
                  :data="{ dir: 'work_ai' }"
                  :before-upload="beforeUpload"
                  @change="(value) => handleUploadChange(value, index)"
                >
                  <div class="upload_con">
                    <div class="upload_txt" v-if="!loading">
                      <span class="text_1">点击或拖拽上传参考图</span>
                      <span class="text_2">支持JPG、PNG，10MB以内.</span>
                    </div>
                    <div class="upload_txt" v-else>
                      <span class="text_1">图片上传中...</span>
                    </div>
                    <div class="upload_image">
                      <template
                        v-if="!loading && !normalParams[index].param_varlue"
                      >
                        <PlusOutlined style="font-size: 14px" />
                        <span style="margin-top: 5px">上传</span>
                      </template>
                      <template
                        v-if="loading && !normalParams[index].param_varlue"
                      >
                        <LoadingOutlined style="font-size: 14px" />
                      </template>
                      <template v-if="normalParams[index].param_varlue">
                        <img
                          style="width: 100%; height: 100%"
                          :src="normalParams[index].param_varlue"
                          alt=""
                        />
                      </template>
                    </div>
                  </div>
                </a-upload-dragger>
              </div>
            </div>
          </div>
  
          <!-- 基础参数 -->
          <div class="base_params_con" v-if="baseParams.length > 0">
            <div class="base_title">
              <div class="left_title">基础参数</div>
              <div class="right_con" @click="showBase = !showBase">
                <span style="margin-right: 10px">{{
                  showBase ? "收起" : "展开"
                }}</span>
                <DownOutlined v-if="!showBase" />
                <UpOutlined v-else />
              </div>
            </div>
            <div
              v-show="showBase"
              class="form_item"
              v-for="(item, index) in baseParams"
              :key="index"
            >
              <!-- 选择风格 -->
              <choosePaintStyle
                v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
                :styleModelList="styleModelList"
                :styleIndex="styleIndex"
                :expandStyle="expandStyle"
                @chooseStyle="chooseStyle"
                @changeStatus="expandStyle = !expandStyle"
              />
              <div class="form_title">
                <div class="left_title">
                  <span
                    v-if="item.is_required"
                    style="color: red; margin-right: 3px"
                    >*</span
                  >{{ item.input_name }}
                </div>
                <a-tooltip placement="left">
                  <template #title>
                    {{ item.param_intro }}
                  </template>
                  <QuestionCircleOutlined v-if="item.param_intro" />
                </a-tooltip>
              </div>
  
              <div
                class="form_value"
                style="position: relative"
                v-if="
                  item.param_name == 'prompt' ||
                  item.param_name == 'prompts' ||
                  item.param_name == 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <div class="text_area_con">
                  <a-textarea
                    style="
                      border: none;
                      background-color: #f6f7f9;
                      border-radius: 10px;
                    "
                    @change="(value) => inputChange(value, item.param_name)"
                    :auto-size="{
                      minRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                      maxRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                    }"
                    v-model:value="baseParams[index].param_varlue"
                    :placeholder="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                        ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                        : '请输入'
                    "
                  />
  
                  <div
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                    class="textarea_bottom"
                  >
                    <a-button
                      v-if="currentTab == 'sd'"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="vocabularyVisible = true"
                      >推荐词</a-button
                    >
                    <a-button
                      v-else
                      :loading="btnLoading"
                      :disabled="!baseParams[index].param_varlue"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="getPrompts(baseParams[index])"
                      >提示词生成</a-button
                    >
                    <a style="color: #999" @click="clearPrompt">清空</a>
                  </div>
                </div>
                <template v-if="currentTab == 'sd'">
                  <div
                    class="bottom_tips"
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                  >
                    <div style="display: flex; align-items: center">
                      <span style="font-size: 12px">示范:</span>
                      <span class="prompt_title" v-if="promptTitle.length > 0">
                        <a
                          class="a_link"
                          @click="chooseRecommad(prom_item)"
                          v-for="(prom_item, prom_index) in promptTitle"
                          :key="prom_index"
                          >{{ prom_item.title }}</a
                        >
                      </span>
                    </div>
                    <RedoOutlined
                      class="refrash_icon"
                      @click="getPromptList"
                      :class="loadPrompt ? 'prompt_loading' : ''"
                    />
                  </div>
                </template>
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'text' &&
                  item.param_name != 'prompt' &&
                  item.param_name != 'prompts' &&
                  item.param_name != 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <a-input
                  v-model:value="baseParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
              </div>
  
              <div class="form_value" v-if="item.input_type == 'number'">
                <!-- 数字文本框 -->
                <a-input-number
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : undefined"
                  :max="item.max * 1 ? item.max * 1 : undefined"
                  v-model:value="baseParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
                <a-slider
                  v-if="item.step && item.min && item.max"
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : 0"
                  :max="item.max * 1 ? item.max * 1 : 0"
                  style="margin-top: 5px"
                  v-model:value="baseParams[index].param_varlue"
                />
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' &&
                  item.param_name != 'is_niji' &&
                  item.param_name != 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <a-select
                  v-model:value="baseParams[index].param_varlue"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <a-select-option
                    v-for="(select_item, select_index) in item.allow_value"
                    :value="select_item"
                    :key="select_index"
                    >{{ select_item }}</a-select-option
                  >
                </a-select>
              </div>
              <!-- 特殊处理选择框 -->
              <div
                class="form_value"
                v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
              >
                <div class="style-list-niji">
                  <div
                    class="style-item"
                    :class="
                      baseParams[index].param_varlue == val ? 'active-style' : ''
                    "
                    @click="selectNiji(item, val)"
                    v-for="(val, tIndex) in baseParams[index].allow_value"
                    :key="tIndex"
                  >
                    <div
                      class="move-box"
                      v-if="baseParams[index].param_varlue == val"
                    ></div>
                    <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                    <img :src="mj_bg" v-else class="example_img" />
                    <div class="item-bottom-niji">
                      <span class="text-blod">{{
                        val == "否" ? "Midjourney" : "Niji"
                      }}</span>
                      <span class="text-cut">{{
                        val == "否" ? "真实感强" : "卡通动漫"
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' && item.param_name == 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <div class="scale-list">
                  <div
                    class="scale-item"
                    :class="item.param_varlue == tItem ? 'br-purple' : ''"
                    @click="changeScaleMode(item, tItem)"
                    v-for="(tItem, tIndex) in item.allow_value"
                    :key="tIndex"
                  >
                    <div
                      :class="
                        item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                      "
                      class="scale-mode"
                      :style="getWHStyle(tItem)"
                    ></div>
                    <span
                      class="margin-top-xs"
                      :class="
                        item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                      "
                      >{{ tItem }}</span
                    >
                  </div>
                </div>
              </div>
  
              <div class="form_value" v-if="item.input_type == 'file'">
                <!-- 文件 -->
                <a-upload-dragger
                  v-model:file-list="fileList"
                  name="image"
                  :show-upload-list="false"
                  :action="$utils.imgAction"
                  :headers="{ 'org-token': $store.getters.token }"
                  :data="{ dir: 'work_ai' }"
                  :before-upload="beforeUpload"
                  @change="(value) => handleUploadChange(value, index)"
                >
                  <div class="upload_con">
                    <div class="upload_txt" v-if="!loading">
                      <span class="text_1">点击或拖拽上传参考图</span>
                      <span class="text_2">支持JPG、PNG，10MB以内.</span>
                    </div>
                    <div class="upload_txt" v-else>
                      <span class="text_1">图片上传中...</span>
                    </div>
                    <div class="upload_image">
                      <template
                        v-if="!loading && !baseParams[index].param_varlue"
                      >
                        <PlusOutlined style="font-size: 14px" />
                        <span style="margin-top: 5px">上传</span>
                      </template>
                      <template v-if="loading && !baseParams[index].param_varlue">
                        <LoadingOutlined style="font-size: 14px" />
                      </template>
                      <template v-if="baseParams[index].param_varlue">
                        <img
                          style="width: 100%; height: 100%"
                          :src="baseParams[index].param_varlue"
                          alt=""
                        />
                      </template>
                    </div>
                  </div>
                </a-upload-dragger>
                <!-- 选择风格 -->
                <choosePaintStyle
                  v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
                  :styleModelList="styleModelList"
                  :styleIndex="styleIndex"
                  :expandStyle="expandStyle"
                  @chooseStyle="chooseStyle"
                  @changeStatus="expandStyle = !expandStyle"
                />
              </div>
            </div>
          </div>
  
          <!-- 高级参数 -->
          <div class="senior_params_con" v-if="seniorParams.length > 0">
            <div class="senior_title">
              <div class="left_title">高级参数</div>
              <div class="right_con" @click="showSenior = !showSenior">
                <span style="margin-right: 10px">{{
                  showSenior ? "收起" : "展开"
                }}</span>
                <DownOutlined v-if="!showSenior" />
                <UpOutlined v-else />
              </div>
            </div>
            <div
              v-show="showSenior"
              class="form_item"
              v-for="(item, index) in seniorParams"
              :key="index"
            >
              <!-- 选择风格 -->
              <choosePaintStyle
                v-if="
                  ((hasNavigate && item.param_name == 'negative_prompt') ||
                    (!hasNavigate &&
                      (item.param_name == 'prompt' ||
                        item.param_name == 'prompts'))) &&
                  styleModelList.length > 0
                "
                :styleModelList="styleModelList"
                :styleIndex="styleIndex"
                :expandStyle="expandStyle"
                @chooseStyle="chooseStyle"
                @changeStatus="expandStyle = !expandStyle"
              />
              <div class="form_title">
                <div class="left_title">
                  <span
                    v-if="item.is_required"
                    style="color: red; margin-right: 3px"
                    >*</span
                  >{{ item.input_name }}
                </div>
                <a-tooltip placement="left">
                  <template #title>
                    {{ item.param_intro }}
                  </template>
                  <QuestionCircleOutlined v-if="item.param_intro" />
                </a-tooltip>
              </div>
  
              <div
                class="form_value"
                style="position: relative"
                v-if="
                  item.param_name == 'prompt' ||
                  item.param_name == 'prompts' ||
                  item.param_name == 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <div class="text_area_con">
                  <a-textarea
                    style="
                      border: none;
                      background-color: #f6f7f9;
                      border-radius: 10px;
                    "
                    @change="(value) => inputChange(value, item.param_name)"
                    :auto-size="{
                      minRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                      maxRows:
                        item.param_name == 'prompt' ||
                        item.param_name == 'prompts'
                          ? 5
                          : 4,
                    }"
                    v-model:value="seniorParams[index].param_varlue"
                    :placeholder="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                        ? '在此输入您的创意，每个提示词用逗号分开，如：一个女孩，绿色头发，校园'
                        : '请输入'
                    "
                  />
  
                  <div
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                    class="textarea_bottom"
                  >
                    <a-button
                      v-if="currentTab == 'sd'"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="vocabularyVisible = true"
                      >推荐词</a-button
                    >
                    <a-button
                      v-else
                      :loading="btnLoading"
                      :disabled="!seniorParams[index].param_varlue"
                      type="link"
                      style="padding: 0; margin: 0"
                      @click="getPrompts(seniorParams[index])"
                      >提示词生成</a-button
                    >
                    <a style="color: #999" @click="clearPrompt">清空</a>
                  </div>
                </div>
                <template v-if="currentTab == 'sd'">
                  <div
                    class="bottom_tips"
                    v-if="
                      item.param_name == 'prompt' || item.param_name == 'prompts'
                    "
                  >
                    <div style="display: flex; align-items: center">
                      <span>示范:</span>
                      <span class="prompt_title" v-if="promptTitle.length > 0">
                        <a
                          class="a_link"
                          @click="chooseRecommad(prom_item)"
                          v-for="(prom_item, prom_index) in promptTitle"
                          :key="prom_index"
                          >{{ prom_item.title }}</a
                        >
                      </span>
                    </div>
                    <RedoOutlined
                      class="refrash_icon"
                      @click="getPromptList"
                      :class="loadPrompt ? 'prompt_loading' : ''"
                    />
                  </div>
                </template>
                <!-- 选择风格 -->
                <choosePaintStyle
                  v-if="
                    ((hasNavigate && item.param_name == 'negative_prompt') ||
                      (!hasNavigate &&
                        (item.param_name == 'prompt' ||
                          item.param_name == 'prompts'))) &&
                    styleModelList.length > 0
                  "
                  :styleModelList="styleModelList"
                  :styleIndex="styleIndex"
                  :expandStyle="expandStyle"
                  @chooseStyle="chooseStyle"
                  @changeStatus="expandStyle = !expandStyle"
                />
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'text' &&
                  item.param_name != 'prompt' &&
                  item.param_name != 'prompts' &&
                  item.param_name != 'negative_prompt'
                "
              >
                <!-- 普通文本框 -->
                <a-input
                  v-model:value="seniorParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
              </div>
  
              <div class="form_value" v-if="item.input_type == 'number'">
                <!-- 数字文本框 -->
                <a-input-number
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : undefined"
                  :max="item.max * 1 ? item.max * 1 : undefined"
                  v-model:value="seniorParams[index].param_varlue"
                  placeholder="请输入"
                  style="width: 100%"
                />
                <a-slider
                  v-if="item.step && item.min && item.max"
                  :step="item.step * 1 ? item.step * 1 : 1"
                  :min="item.min * 1 ? item.min * 1 : 0"
                  :max="item.max * 1 ? item.max * 1 : 0"
                  style="margin-top: 5px"
                  v-model:value="seniorParams[index].param_varlue"
                />
              </div>
  
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' &&
                  item.param_name != 'is_niji' &&
                  item.param_name != 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <a-select
                  v-model:value="seniorParams[index].param_varlue"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <a-select-option
                    v-for="(select_item, select_index) in item.allow_value"
                    :value="select_item"
                    :key="select_index"
                    >{{ select_item }}</a-select-option
                  >
                </a-select>
              </div>
              <!-- 特殊处理选择框 -->
              <div
                class="form_value"
                v-if="item.input_type == 'select' && item.param_name == 'is_niji'"
              >
                <div class="style-list-niji">
                  <div
                    class="style-item"
                    :class="
                      seniorParams[index].param_varlue == val
                        ? 'active-style'
                        : ''
                    "
                    @click="selectNiji(item, val)"
                    v-for="(val, tIndex) in seniorParams[index].allow_value"
                    :key="tIndex"
                  >
                    <div
                      class="move-box"
                      v-if="seniorParams[index].param_varlue == val"
                    ></div>
                    <img :src="niji_bg" v-if="val == '是'" class="example_img" />
                    <img :src="mj_bg" v-else class="example_img" />
                    <div class="item-bottom-niji">
                      <span class="text-blod">{{
                        val == "否" ? "Midjourney" : "Niji"
                      }}</span>
                      <span class="text-cut">{{
                        val == "否" ? "真实感强" : "卡通动漫"
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="form_value"
                v-if="
                  item.input_type == 'select' && item.param_name == 'aspect_ratio'
                "
              >
                <!-- 选择框 -->
                <div class="scale-list">
                  <div
                    class="scale-item"
                    :class="item.param_varlue == tItem ? 'br-purple' : ''"
                    @click="changeScaleMode(item, tItem)"
                    v-for="(tItem, tIndex) in item.allow_value"
                    :key="tIndex"
                  >
                    <div
                      :class="
                        item.param_varlue == tItem ? 'bg-purple' : 'bg-grey'
                      "
                      class="scale-mode"
                      :style="getWHStyle(tItem)"
                    ></div>
                    <span
                      class="margin-top-xs"
                      :class="
                        item.param_varlue == tItem ? 'text-purple' : 'text-grey'
                      "
                      >{{ tItem }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="form_value" v-if="item.input_type == 'file'">
                <!-- 文件 -->
                <a-upload-dragger
                  v-model:file-list="fileList"
                  name="image"
                  :show-upload-list="false"
                  :action="$utils.imgAction"
                  :headers="{ 'org-token': $store.getters.token }"
                  :data="{ dir: 'work_ai' }"
                  :before-upload="beforeUpload"
                  @change="(value) => handleUploadChange(value, index)"
                >
                  <div class="upload_con">
                    <div class="upload_txt" v-if="!loading">
                      <span class="text_1">点击或拖拽上传参考图</span>
                      <span class="text_2">支持JPG、PNG，10MB以内.</span>
                    </div>
                    <div class="upload_txt" v-else>
                      <span class="text_1">图片上传中...</span>
                    </div>
                    <div class="upload_image">
                      <template
                        v-if="!loading && !seniorParams[index].param_varlue"
                      >
                        <PlusOutlined style="font-size: 14px" />
                        <span style="margin-top: 5px">上传</span>
                      </template>
                      <template
                        v-if="loading && !seniorParams[index].param_varlue"
                      >
                        <LoadingOutlined style="font-size: 14px" />
                      </template>
                      <template v-if="seniorParams[index].param_varlue">
                        <img
                          style="width: 100%; height: 100%"
                          :src="seniorParams[index].param_varlue"
                          alt=""
                        />
                      </template>
                    </div>
                  </div>
                </a-upload-dragger>
                <!-- 选择风格 -->
                <choosePaintStyle
                  v-if="(!hasNavigate || !hasPromop) && styleModelList.length > 0"
                  :styleModelList="styleModelList"
                  :styleIndex="styleIndex"
                  :expandStyle="expandStyle"
                  @chooseStyle="chooseStyle"
                  @changeStatus="expandStyle = !expandStyle"
                />
              </div>
            </div>
          </div>
        </div>
  
        <div class="bottom_btn" v-if="!noParamsList">
          <span class="consume_tips" v-if="consumeCountNum">
            将消耗：{{ consumeCountNum }}次
          </span>
          <a-button
            style="width: 100%; margin-top: 10px"
            :disabled="isGenerate"
            :class="!isGenerate ? 'create_btn' : ''"
            @click="generateImage"
            >{{ isGenerate ? "生成中..." : "立即生成" }}
          </a-button>
  
          <a-tooltip>
            <template #title
              >该服务处于前沿探索阶段，您应当合法合规使用本服务，并承担由此产生的所有责任。我们对您的使用不做保证且不承担任何责任。</template
            >
            <div class="disclaimer-wrap" @click="disclaimerClick">
              <ExclamationCircleOutlined />
              免责声明
            </div>
          </a-tooltip>
        </div>
      </div>
  
      <a-modal
        title="推荐词"
        :visible="vocabularyVisible"
        :width="600"
        centered
        @ok="vocabularyVisible = false"
        @cancel="vocabularyVisible = false"
      >
        <div class="keywords_con">
          <div class="tab_list">
            <div
              @click="tagTabChange(index, 'first')"
              :class="currentIndex == index ? 'active' : ''"
              class="tab_item"
              v-for="(item, index) in menuList"
              :key="index"
            >
              {{ item.name }}
            </div>
            <div class="line_height"></div>
            <div class="sub_container">
              <div class="sub_item" v-for="(item, index) in subMenu" :key="index">
                <div class="label_title" @click="tagTabChange(index, 'second')">
                  <UpOutlined v-if="item.visible" />
                  <DownOutlined v-else />
                  <span style="font-weight: 600; color: #333333; margin-left: 3px"
                    >{{ item.name }}（{{ item.words.length }}）</span
                  >
                </div>
                <div class="tags_con" v-if="item.visible">
                  <div
                    @click="chooseTagsItems(index, words_index)"
                    :class="words_item.checked ? 'active' : ''"
                    class="tab_item"
                    v-for="(words_item, words_index) in item.words"
                    :key="words_index"
                  >
                    {{ words_item.name }}（{{ words_item.assist_prompt }}）
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
  
      <LoginModal
        :visible="loginVisible"
        @onClose="loginVisible = false"
        @loginCallback="loginCallback"
      />
  
      <memberShip
        :visible="showMemberShip"
        @close="showMemberShip = false"
        :type="2"
      />
      <!-- 展示放大后的图片 -->
      <div
        class="img-mask"
        @click="imgVisible = false"
        :style="{ display: imgVisible ? 'flex' : 'none' }"
      >
        <!-- <CloseCircleOutlined class="mask-close" @click="imgVisible=false" /> -->
        <img :src="currentBiggerImgUrl" class="img-center" />
      </div>
      <!-- <a-modal v-model:visible="imgVisible" width="600px" :footer="false" title="图片详情" >
        <img :src="currentBiggerImgUrl" alt="" style="width: 100%" />
      </a-modal> -->
    </div>
  </template>
  
  <script>
  import {
    defineComponent,
    ref,
    reactive,
    toRefs,
    computed,
    nextTick,
    watch,
  } from "vue";
  import { message } from "ant-design-vue";
  import {
    QuestionCircleOutlined,
    PlusOutlined,
    LoadingOutlined,
    UpOutlined,
    DownOutlined,
    CheckOutlined,
    DeleteOutlined,
    VerticalAlignBottomOutlined,
    RedoOutlined,
    HeartFilled,
    HeartOutlined,
    ExclamationCircleOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    CloseCircleOutlined,
    ForwardOutlined,
  } from "@ant-design/icons-vue";
  import request from "../../../common/utils/request";
  import utils from "../../../common/utils/utils.js";
  import moment from "moment";
  import axios from "axios";
  import store from "../../../store/index.js";
  import { useRoute, useRouter } from "vue-router";
  import memberShip from "../../vip/modules/memberShip.vue";
  import choosePaintStyle from "./components/chooseStyle.vue";
  import { streamFetch } from "../../../common/utils/streamFetch";
  import defaultSetting from "../../../common/utils/defaultSetting";
  
  import defaultImg from '../../../common/image/paint_default.png'
  export default defineComponent({
    components: {
      QuestionCircleOutlined,
      PlusOutlined,
      LoadingOutlined,
      UpOutlined,
      DownOutlined,
      DeleteOutlined,
      VerticalAlignBottomOutlined,
      memberShip,
      RedoOutlined,
      HeartFilled,
      HeartOutlined,
      choosePaintStyle,
      ExclamationCircleOutlined,
      LeftCircleOutlined,
      RightCircleOutlined,
      // CloseCircleOutlined,
    },
    setup(props, context) {
      const router = useRouter();
      const route = useRoute();
      const state = reactive({
        defaultImg,
        mj_bg: utils.staticPath + "images/workAi/mj-bg.png",
        niji_bg: utils.staticPath + "images/workAi/niji-bg.png",
        currentBiggerImgIndex: 1,
        imgVisible: false,
        tabList: [
          {
            tab_name: "热门模型",
            value: 1,
          },
          {
            tab_name: "我的收藏",
            value: 2,
          },
          {
            tab_name: "我的创作",
            value: 3,
          },
        ],
        modelList: [],
  
        imageTabIndex: 0,
        fileList: [],
        imageUrl: "",
        loading: false,
        caseInfo: {},
        paramsList: [],
        promptInitial: "",
        isGenerate: false,
        imageLoading: false,
        loadOver: false,
        caseId: "",
        outputImages: [],
        currentOutIndex: 0,
  
        //辅助词
        currentIndex: 0,
        menuList: [],
        subMenu: [],
        modelLoading: false,
        pageInfo: {
          title: "",
          page: 1,
          pageSize: 10,
        },
        noMore: false,
        maxPage: 1,
        promptTitle: [],
        fitWidth: true,
        downloadIng: false,
        styleIndex: -1,
        styleModelList: [],
        mateConsume: [],
        loginVisible: false,
        showMemberShip: false,
        expandStyle: false,
        vocabularyVisible: false,
        hasNavigate: false,
        showDetail: false,
        hasPromop: false,
        loadPrompt: false,
  
        normalParams: [],
        baseParams: [],
        seniorParams: [],
        showSenior: false,
        showBase: false,
        disclaimer_url: "", //免责声明
        hotModelList: [], //热门模型 用于匹配
        paramsLoading: false,
        noParamsList: false,
        hideLeft: false, //隐藏左侧
        currentPage: 0,
        currentTab: "sd",
        btnLoading: false,
        tLoading: false,
        carouselKey: 0,
      });
      const onChange = (current) => {
        state.currentPage = current;
      };
  
      const middleTopStyle = computed(() => {
        if (state.outputImages.length > 0 || state.currentTab == "mj") {
          return {
            height: `calc(100% - 80px)`,
          };
        }
        return {
          height: `100%`,
        };
      });
  
      const middleConStyle = computed(() => {
        if (state.hideLeft) {
          return {
            width: "80%",
          };
        } else {
          return {
            width: "60%",
          };
        }
      });
  
      const rightConStyle = computed(() => {
        return {};
      });
  
      const searchThis = () => {
        state.pageInfo.page = 1;
        state.modelList = [];
        if (state.imageTabIndex == 0) {
          getHotModal();
        } else if (state.imageTabIndex == 1) {
          getMyCollect();
        } else if (state.imageTabIndex == 2) {
          getMyCreate();
        }
      };
  
      const getHotModal = () => {
        state.modelLoading = true;
        let params = {};
        Object.assign(params, state.pageInfo);
        if (params.page == 1) {
          state.modelList = [];
        }
        if (
          route.query.type == "text2image" ||
          route.query.type == "image2image"
        ) {
          params.feature = route.query.type;
        } else if (route.query.type) {
          params.model_id = route.query.type;
        }
        request
          .get("/work_ai", "/user/image/case/hotmodel/list", params)
          .then((res) => {
            state.modelLoading = false;
            state.modelList = [...state.modelList, ...res.result.data];
            state.modelList.map((v) => {
              v.collect = v.collection ? 1 : 0;
            });
            computeMaxpage(res.result.total);
          })
          .catch((err) => {
            state.modelLoading = false;
          });
      };
  
      const getMyCreate = () => {
        state.modelLoading = true;
        request
          .get("/work_ai", "/user/ai/case/list", state.pageInfo)
          .then((res) => {
            state.modelLoading = false;
            if (state.pageInfo.page == 1) {
              state.modelList = res.result.data;
            } else {
              state.modelList = [...state.modelList, ...res.result.data];
            }
            computeMaxpage(res.result.total);
          })
          .catch((err) => {
            state.modelLoading = false;
          });
      };
  
      const getMyCollect = () => {
        state.modelLoading = true;
        request
          .get("/work_ai", "/user/image/case/collect/list", state.pageInfo)
          .then((res) => {
            state.modelLoading = false;
            if (state.pageInfo.page == 1) {
              state.modelList = res.result.data;
            } else {
              state.modelList = [...state.modelList, ...res.result.data];
            }
            computeMaxpage(res.result.total);
          })
          .catch((err) => {
            state.modelLoading = false;
          });
      };
  
      const computeMaxpage = (count) => {
        state.noMore = false;
        if (count % 10 == 0) {
          state.maxPage = parseInt(count / 10);
        } else {
          state.maxPage = parseInt(count / 10 + 1);
        }
      };
  
      const tabChange = (index) => {
        state.currentPage = 0;
        if (state.imageTabIndex == index) return;
        state.pageInfo.page = 1;
        state.pageInfo.title = "";
        if (index == 0) {
          state.imageTabIndex = index;
          state.modelList = [];
          getHotModal();
        } else {
          utils.checkLogin().then((isLogin) => {
            if (!isLogin) {
              state.loginVisible = true;
              return;
            }
            state.imageTabIndex = index;
            state.modelList = [];
            if (index == 1) {
              getMyCollect();
            } else if (index == 2) {
              getMyCreate();
            }
          });
        }
      };
  
      const handleUploadChange = (info, index) => {
        state.paramsList[index].param_varlue = "";
        if (info.file.status === "uploading") {
          state.loading = true;
          return;
        }
        if (info.file.status === "done") {
          if (info.file.response.code == 1000) {
            const { fileName, fileUrl } = info.file.response.data;
            state.paramsList[index].param_varlue = fileUrl;
            state.loading = false;
          }
        }
        if (info.file.status === "error") {
          state.loading = false;
          message.error("上传失败");
        }
      };
  
      const beforeUpload = (file) => {
        const isJpgOrPng =
          file.type === "image/jpeg" || file.type === "image/png";
        if (!isJpgOrPng) {
          message.error("你只能上传jpg或png格式文件!");
        }
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
          message.error("上传图片大小必须小于10MB!");
        }
        return isJpgOrPng && isLt2M;
      };
  
      const getParamsList = (id) => {
        state.paramsLoading = true;
        state.noParamsList = false;
        request
          .get("/work_ai", "/ai/aimodel/input/list", {
            ai_art_model_id: id,
            is_show: 1,
          })
          .then((res) => {
            state.paramsLoading = false;
            state.paramsList = [];
            state.normalParams = [];
            state.baseParams = [];
            state.seniorParams = [];
            if (res.data.length == 0) {
              state.noParamsList = true;
            }
            nextTick(() => {
              state.hasNavigate = false;
              res.data.map((v, i) => {
                if (v.param_varlue && v.input_type == "number") {
                  v.param_varlue = v.param_varlue * 1;
                }
                if (v.param_name == "prompt" || v.param_name == "prompts") {
                  state.hasPromop = true;
                  state.promptInitial = v.param_varlue;
                }
                if (!v.param_varlue) {
                  if (v.input_type == "number") {
                    v.param_varlue = v.default_value * 1;
                  } else {
                    v.param_varlue = v.default_value;
                  }
                }
                if (v.param_name == "negative_prompt") {
                  state.hasNavigate = true;
                }
                state.paramsList.push(v);
              });
  
              state.paramsList.map((v) => {
                if (v.show_type_group == 2) {
                  state.seniorParams.push(v);
                } else if (v.show_type_group == 1) {
                  state.baseParams.push(v);
                } else {
                  state.normalParams.push(v);
                }
              });
              getPromptList();
              if (state.caseInfo.id) {
                getCaseInfo(state.caseInfo.id);
              }
            });
          })
          .catch((err) => {
            state.paramsLoading = false;
          });
      };
  
      const getCaseInfo = (id, showModal = false) => {
        request
          .get("/work_ai", "/user/image/case/detail", {
            caseId: id,
          })
          .then((res) => {
            state.caseInfo = res.result;
            state.caseInfo.aspect_ratio =
              res.result.case_prompt.full_input.aspect_ratio;
            state.currentTab =
              state.caseInfo.platform.api == "midjourney" ? "mj" : "sd";
  
            getStyleModel();
            state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;
  
            if (state.caseInfo.images[0] && state.caseInfo.images[0].origin_uri) {
              let imgs = state.caseInfo.third_image
                ? state.caseInfo.third_image
                : [];
              let img = {
                id: state.caseInfo.images[0].id,
                url: state.caseInfo.images[0].origin_uri,
              };
              imgs.splice(0, 0, img);
  
              state.caseInfo.third_image = imgs;
            }
  
            if (showModal) {
              state.imgVisible = true;
            }
            utils.setStorage("caseInfo", JSON.stringify(state.caseInfo));
            state.carouselKey++;
            getImgInfo(state.caseInfo.images[0]?.uri ?? "");
            let caseInput = res.result.case_prompt.full_input;
            state.paramsList.map((item, index) => {
              if (caseInput[item.param_name]) {
                if (state.paramsList[index].input_type == "number") {
                  state.paramsList[index].param_varlue =
                    caseInput[item.param_name] * 1;
                } else {
                  state.paramsList[index].param_varlue =
                    caseInput[item.param_name];
                }
              }
              if (item.param_name == "prompt" || item.param_name == "prompts") {
                state.promptInitial = caseInput[item.param_name];
              }
            });
  
            state.normalParams = [];
            state.seniorParams = [];
            state.baseParams = [];
            nextTick(() => {
              state.paramsList.map((v) => {
                if (v.show_type_group == 2) {
                  state.seniorParams.push(v);
                } else if (v.show_type_group == 1) {
                  state.baseParams.push(v);
                } else {
                  state.normalParams.push(v);
                }
              });
            });
          });
      };
  
      const loginCallback = () => {
        state.loginVisible = false;
        router.go(0);
      };
  
      const generateImage = () => {
        utils.checkLogin().then((isLogin) => {
          if (!isLogin) {
            state.loginVisible = true;
            return;
          }
          let flag = true;
          let arr_need = [];
          let paramsObj = {};
          state.normalParams.map((v) => {
            paramsObj[v.param_name] = v.param_varlue;
            if (v.is_required && !v.param_varlue) {
              flag = false;
              arr_need.push(v.input_name);
            }
          });
          state.seniorParams.map((v) => {
            paramsObj[v.param_name] = v.param_varlue;
            if (v.is_required && !v.param_varlue) {
              flag = false;
              arr_need.push(v.input_name);
            }
          });
          state.baseParams.map((v) => {
            paramsObj[v.param_name] = v.param_varlue;
            if (v.is_required && !v.param_varlue) {
              flag = false;
              arr_need.push(v.input_name);
            }
          });
          if (!flag) {
            message.warn(arr_need + "等字段必填");
            return;
          }
          state.isGenerate = true;
          paramsObj.platformId = state.caseInfo.platform_id;
          paramsObj.modelId = state.caseInfo.model_id;
          paramsObj.featureId = state.caseInfo.feature_id;
          let teamId = store.state.user.teamId;
          if (teamId) {
            paramsObj.team_id = teamId;
          }
          state.imageLoading = true;
          if (
            state.caseInfo.feature &&
            state.caseInfo.feature.feature == "text2image"
          ) {
            request
              .post("/work_ai", "/ai/text2image/generate", paramsObj)
              .then((res) => {
                if (res.result.status == "error") {
                  message.error(res.result.message);
                  state.isGenerate = false;
                  state.imageLoading = false;
                  return;
                }
                let params = {};
                params.replicateId = res.result.id;
                params.modelId = paramsObj.modelId;
                params.featureId = paramsObj.featureId;
                params.platformId = paramsObj.platformId;
                state.caseId = res.result.caseId;
                state.caseInfo.id = res.result.caseId;
  
                utils.modalConfirm({
                  title: "提示",
                  content: "绘画任务正在排队制作中，生成后将在我的作品中展示",
                  cancelText: "我的作品",
                  okText: "确定等待",
                  onOk: () => {
                    getResult(params);
                  },
                  onCancel: () => {
                    state.isGenerate = false;
                    state.imageLoading = false;
                    tabChange(2);
                  },
                });
              })
              .catch((err) => {
                state.isGenerate = false;
                state.imageLoading = false;
                if (err.code == 36402) {
                  state.showMemberShip = true;
                  message.warn(err.msg);
                }
              });
          } else if (
            state.caseInfo.feature &&
            state.caseInfo.feature.feature == "image2image"
          ) {
            request
              .post("/work_ai", "/ai/image2image/generate", paramsObj)
              .then((res) => {
                if (res.result.status == "error") {
                  message.error(res.result.message);
                  state.isGenerate = false;
                  state.imageLoading = false;
                  return;
                }
                let params = {};
                params.replicateId = res.result.id;
                params.modelId = paramsObj.modelId;
                params.featureId = paramsObj.featureId;
                params.platformId = paramsObj.platformId;
                state.caseId = res.result.caseId;
                state.caseInfo.id = res.result.caseId;
                utils.modalConfirm({
                  title: "提示",
                  content: "绘画任务正在排队制作中，生成后将在我的作品中展示",
                  cancelText: "我的作品",
                  okText: "确定等待",
                  onOk: () => {
                    getResult(params);
                  },
                  onCancel: () => {
                    state.isGenerate = false;
                    state.imageLoading = false;
                    tabChange(2);
                  },
                });
              })
              .catch((err) => {
                state.isGenerate = false;
                state.imageLoading = false;
                if (err.code == 36402) {
                  state.showMemberShip = true;
                  message.warn(err.msg);
                }
              });
          }
        });
      };
  
      const getResult = (params, refreshMyWorks) => {
        request
          .post("/work_ai", "/ai/generate/result", params)
          .then((res) => {
            if (
              res.result.status != "success" &&
              res.result.status != "succeeded" &&
              res.result.status != "failed" &&
              res.result.status != "error"
            ) {
              let obj = {};
              Object.assign(obj, params);
              obj.replicateId = res.result.replicate_id;
              let timeout = setTimeout(() => {
                getResult(obj, refreshMyWorks);
                clearTimeout(timeout);
              }, 1500);
            }
            if (
              res.result.status == "success" ||
              res.result.status == "succeeded"
            ) {
              state.isGenerate = false;
              state.tLoading = false;
              state.loadOver = true;
              state.currentPage = 0;
              message.success("生成完成！");
              if (state.caseId) {
                getCaseInfo(state.caseId);
              }
              console.log(refreshMyWorks, state.imageTabIndex);
              if (refreshMyWorks && state.imageTabIndex == 2) {
                tabChange(2);
              }
              state.outputImages = res.result.output;
              state.currentOutIndex = res.result.output.length - 1;
              state.imageLoading = false;
              if (state.outputImages.length > 0) {
                getImgInfo(state.outputImages[0]);
              }
            }
  
            if (res.result.output && res.result.output.length > 0) {
              state.outputImages = res.result.output;
              state.currentOutIndex = res.result.output.length - 1;
              if (state.outputImages.length > 0) {
                getImgInfo(state.outputImages[0]);
              }
            }
  
            if (res.result.status == "failed" || res.result.status == "error") {
              state.isGenerate = false;
              state.imageLoading = false;
              state.tLoading = false;
              message.error(res.result.error);
            }
          })
          .catch((err) => {
            state.isGenerate = false;
            state.imageLoading = false;
            state.tLoading = false;
          });
      };
  
      const tagTabChange = (index, type) => {
        if (type == "first") {
          if (state.currentIndex == index) return;
          state.currentIndex = index;
          state.subMenu = state.menuList[index].children;
          if (state.subMenu.length > 0) {
            state.subMenu[0].visible = true;
          }
        }
        if (type == "second") {
          if (!state.subMenu[index].visible) {
            state.subMenu[index].visible = true;
          } else {
            state.subMenu[index].visible = false;
          }
        }
      };
      const chooseTagsItems = (index, sub_index) => {
        if (!state.subMenu[index].words[sub_index].checked) {
          state.subMenu[index].words[sub_index].checked = true;
        } else {
          state.subMenu[index].words[sub_index].checked = false;
        }
        let text = "";
        state.menuList.map((first_item) => {
          if (first_item.children && first_item.children.length > 0) {
            first_item.children.map((second_item) => {
              if (second_item.words && second_item.words.length > 0) {
                second_item.words.map((third_item) => {
                  if (third_item.checked) {
                    text += third_item.assist_prompt + ",";
                  }
                });
              }
            });
          }
        });
        text = text.substring(0, text.length - 1);
        state.paramsList.map((item, index) => {
          if (
            (item.param_name == "prompt" || item.param_name == "prompts") &&
            text
          ) {
            if (state.promptInitial) {
              let last = state.promptInitial.substring(
                state.promptInitial.length - 1,
                state.promptInitial.length
              );
              if (last == ",") {
                state.paramsList[index].param_varlue = state.promptInitial + text;
              } else {
                state.paramsList[index].param_varlue =
                  state.promptInitial + "," + text;
              }
            } else {
              state.paramsList[index].param_varlue = state.promptInitial + text;
            }
          }
          if (
            (item.param_name == "prompt" || item.param_name == "prompts") &&
            !text
          ) {
            state.paramsList[index].param_varlue = state.promptInitial;
          }
        });
  
        state.normalParams = [];
        state.seniorParams = [];
        state.baseParams = [];
        nextTick(() => {
          state.paramsList.map((v) => {
            if (v.show_type_group == 2) {
              state.seniorParams.push(v);
            } else if (v.show_type_group == 1) {
              state.baseParams.push(v);
            } else {
              state.normalParams.push(v);
            }
          });
        });
      };
  
      const getVocabularyList = () => {
        request
          .get("/work_ai", "/ai/aimodel/assist/wordAndCate/list", {})
          .then((res) => {
            state.menuList = res.result;
            if (state.menuList.length > 0) {
              state.currentIndex = 0;
              state.subMenu = res.result[0].children;
              if (state.subMenu.length > 0) {
                state.subMenu[0].visible = true;
              }
            }
          });
      };
  
      const chooseRecommad = (obj) => {
        state.paramsList.map((item, index) => {
          if (item.param_name == "prompt" || item.param_name == "prompts") {
            state.paramsList[index].param_varlue = obj.prompt;
            state.promptInitial = obj.prompt;
          }
          if (item.param_name == "negative_prompt") {
            state.paramsList[index].param_varlue = obj.negative_prompt;
          }
          if (
            (item.param_name == "image" || item.param_name == "images") &&
            obj.image
          ) {
            state.paramsList[index].param_varlue = obj.image;
          }
          if (
            (item.param_name == "image" || item.param_name == "images") &&
            !obj.image
          ) {
            state.paramsList[index].param_varlue = "";
          }
        });
  
        state.normalParams = [];
        state.seniorParams = [];
        state.baseParams = [];
        nextTick(() => {
          state.paramsList.map((v) => {
            if (v.show_type_group == 2) {
              state.seniorParams.push(v);
            } else if (v.show_type_group == 1) {
              state.baseParams.push(v);
            } else {
              state.normalParams.push(v);
            }
          });
        });
      };
  
      const clearPrompt = () => {
        state.paramsList.map((item, index) => {
          if (item.param_name == "prompt" || item.param_name == "prompts") {
            state.paramsList[index].param_varlue = "";
            state.promptInitial = "";
            getVocabularyList();
          }
        });
  
        state.normalParams = [];
        state.seniorParams = [];
        state.baseParams = [];
        nextTick(() => {
          state.paramsList.map((v) => {
            if (v.show_type_group == 2) {
              state.seniorParams.push(v);
            } else if (v.show_type_group == 1) {
              state.baseParams.push(v);
            } else {
              state.normalParams.push(v);
            }
          });
        });
      };
  
      const getPromptList = () => {
        state.loadPrompt = true;
        request
          .get("/work_ai", "/ai/generate/prompt", {
            limit: 4,
            modelId: state.caseInfo.model_id,
          })
          .then((res) => {
            state.promptTitle = res.result;
            state.loadPrompt = false;
          })
          .catch((err) => {
            state.loadPrompt = false;
          });
      };
  
      const inputChange = (value, type) => {
        if (type == "prompt") {
          state.paramsList.map((item, index) => {
            if (item.param_name == "prompt" || item.param_name == "prompts") {
              state.promptInitial = item.param_varlue;
              if (!state.promptInitial) {
                getVocabularyList();
              }
            }
          });
        }
      };
  
      const deleteCollect = (item) => {
        utils.modalConfirm({
          title: "提示",
          content:
            state.imageTabIndex == 1
              ? "确定要取消此收藏吗？"
              : "确定要删除此创作吗？",
          onOk: () => {
            if (state.imageTabIndex == 1) {
              request
                .del("/work_ai", "/user/image/case/collect/delete", {
                  case_id: item.id,
                  id: item.collection.id,
                })
                .then((res) => {
                  message.success("删除成功！");
                  if (item.id == state.caseInfo.id) {
                    state.caseInfo.collect = 0;
                  }
                  state.pageInfo.page = 1;
                  getMyCollect();
                });
            } else if (state.imageTabIndex == 2) {
              request
                .del("/work_ai", "/user/image/case/delete", {
                  id: item.id,
                })
                .then((res) => {
                  message.success("删除成功！");
                  state.pageInfo.page = 1;
                  getMyCreate();
                });
            }
          },
        });
      };
  
      const collectClick = (item) => {
        utils.checkLogin().then((isLogin) => {
          if (!isLogin) {
            state.loginVisible = true;
            return;
          }
          if (item.collect) {
            request
              .del("/work_ai", "/user/image/case/collect/delete", {
                case_id: item.id,
                id: item.collect_id || item.collection.id,
              })
              .then((res) => {
                message.success("取消收藏成功！");
                item.collect = 0;
                if (item.id == state.caseInfo.id) {
                  state.caseInfo.collect = 0;
                }
              });
          } else {
            request
              .post("/work_ai", "/user/image/case/collect/save", {
                case_id: item.id,
              })
              .then((res) => {
                message.success("收藏成功！");
                item.collect_id = res.id;
                item.collect = 1;
                if (item.id == state.caseInfo.id) {
                  state.caseInfo.collect = 1;
                  state.caseInfo.collect_id = res.id;
                }
              });
          }
        });
      };
  
      const collectSingleClick = () => {
        utils.checkLogin().then((isLogin) => {
          if (!isLogin) {
            state.loginVisible = true;
            return;
          }
          if (state.caseInfo.collect) {
            request
              .del("/work_ai", "/user/image/case/collect/delete", {
                case_id: state.caseInfo.id,
                id: state.caseInfo.collect_id || state.caseInfo.collection.id,
              })
              .then((res) => {
                message.success("取消收藏成功！");
                state.caseInfo.collect = 0;
                state.modelList.map((v) => {
                  if (state.caseInfo.id == v.id) {
                    v.collect = 0;
                  }
                });
              });
          } else {
            request
              .post("/work_ai", "/user/image/case/collect/save", {
                case_id: state.caseInfo.id,
              })
              .then((res) => {
                message.success("收藏成功！");
                state.caseInfo.collect_id = res.id;
                state.caseInfo.collect = 1;
                state.modelList.map((v) => {
                  if (state.caseInfo.id == v.id) {
                    v.collect = 1;
                    v.collect_id = res.id;
                  }
                });
              });
          }
  
          if (state.imageTabIndex == 1) {
            state.pageInfo.page = 1;
            getMyCollect();
          }
        });
      };
  
      const downloadThis = (item) => {
        if (item.images.length > 1) {
          state.downloadIng = true;
          let params = {
            caseId: item.id,
            org_id: store.getters.orgId,
          };
          axios
            .get("/api/work_ai/user/image/case/download", {
              params,
              responseType: "blob",
            })
            .then((response) => {
              state.downloadIng = false;
              const blob = new Blob([response.data], {
                type: "application/zip",
              });
              const downloadUrl = URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.href = downloadUrl;
              link.download = item.id + moment(new Date()).format("YYYYMMDD");
              link.click();
            })
            .catch((error) => {
              state.downloadIng = false;
            });
        } else {
          let imgUrl = "";
          if (
            state.outputImages.length > 0 &&
            state.outputImages[state.currentOutIndex]
          ) {
            imgUrl = state.outputImages[state.currentOutIndex];
          } else if (
            state.currentPage == 0 &&
            state.caseInfo.images &&
            state.caseInfo.images[0].origin_uri &&
            state.caseInfo.id
          ) {
            imgUrl = state.caseInfo.images && state.caseInfo.images[0].origin_uri;
          } else if (
            state.currentPage > 0 &&
            state.caseInfo.third_image &&
            state.caseInfo.third_image.length
          ) {
            imgUrl = state.caseInfo.third_image[state.currentPage].url;
          } else {
            imgUrl = state.outputImages[state.currentOutIndex];
          }
  
          let image = new Image();
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function () {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png");
            let a = document.createElement("a");
            let event = new MouseEvent("click");
            if (item.images[0].origin_uri) {
              a.download = item.images[0].origin_uri.substring(
                item.images[0].origin_uri.lastIndexOf("/") + 1
              );
            } else {
              a.download = item.images[0].substring(
                item.images[0].lastIndexOf("/") + 1
              );
            }
            a.href = url;
            a.dispatchEvent(event);
          };
          image.src = imgUrl;
        }
      };
  
      const chooseStyle = (index) => {
        // if (state.styleIndex == index) return;
        state.styleIndex = index;
        getImgInfo(state.styleModelList[index].example_img);
        state.caseInfo = {};
        state.downloadIng = false;
        state.outputImages = [];
        state.caseInfo.images = [
          {
            uri: state.styleModelList[index].example_img,
          },
        ];
        state.caseInfo.platform_id = state.styleModelList[index].platform_id;
        state.caseInfo.model_id = state.styleModelList[index].id;
        state.caseInfo.feature_id = state.styleModelList[index].feature_id;
        state.caseInfo.feature = state.styleModelList[index].feature;
        getParamsList(state.styleModelList[index].id);
        getVocabularyList();
      };
  
      const handleScrollChange = (e) => {
        const { scrollTop, clientHeight, scrollHeight } = e.target;
        if (scrollTop + clientHeight === scrollHeight) {
          if (state.modelList.length > 0) {
            if (state.pageInfo.page >= state.maxPage) {
              state.noMore = true;
            } else {
              state.pageInfo.page += 1;
              if (state.imageTabIndex == 0) {
                getHotModal();
              } else if (state.imageTabIndex == 1) {
                getMyCollect();
              } else if (state.imageTabIndex == 2) {
                getMyCreate();
              }
            }
          }
        }
      };
  
      const getStyleModel = (isModeTabChange = false) => {
        let params = {};
        if (
          route.query.type &&
          (route.query.type == "image2image" || route.query.type == "text2image")
        ) {
          params = {
            s: 1,
            feature: route.query.type,
            platform_api: state.currentTab,
          };
        } else {
          params = {
            s: 1,
            platform_api: state.currentTab,
          };
        }
        request.get("/work_ai", "/ai/aimodel/list", params).then((res) => {
          state.styleModelList = res.result;
          if (
            (state.caseInfo.model_id == 0 && !isModeTabChange) ||
            (state.caseInfo.model_id && !isModeTabChange)
          ) {
            state.styleIndex = state.styleModelList.findIndex(
              (v) => v.id == state.caseInfo.model_id
            );
          } else {
            chooseStyle(0);
            if (!isModeTabChange) {
              getHotModal();
            }
          }
  
          state.showDetail = true;
        });
      };
      const modeTabChange = (tab) => {
        state.currentTab = tab;
        if (route.query.type) {
          utils.removeStorage("caseInfo");
          utils.removeStorage("case_tab");
          state.caseInfo = {};
          state.paramsList = [];
          state.normalParams = [];
          state.baseParams = [];
          state.seniorParams = [];
          state.styleModelList = [];
          state.styleIndex = -1;
          state.pageInfo.page = 1;
          state.expandStyle = false;
          if (
            route.query.type == "text2image" ||
            route.query.type == "image2image"
          ) {
            getStyleModel();
          } else {
            getHotModelList().then((res) => {
              res.map((item) => {
                if (item.id == route.query.type) {
                  state.caseInfo = {};
                  state.downloadIng = false;
                  state.outputImages = [];
                  state.caseInfo.platform_id = item.platform_id;
                  state.caseInfo.model_id = item.id;
                  state.caseInfo.feature_id = item.feature_id;
                  state.caseInfo.feature = item.feature;
                  getParamsList(item.id);
                  getVocabularyList();
                }
              });
            });
          }
        }
  
        if (route.query.id || !route.query.type) {
          getStyleModel(true);
        }
        // getStyleModel(true)
      };
      const makeSame = (item) => {
        state.carouselKey++;
        if (item.third_image && item.images[0] && item.images[0].key != -1) {
          item.third_image.unshift({
            key: -1,
            url: item.images[0]?.origin_uri ?? "",
          });
        }
        state.currentPage = 0;
  
        state.currentTab = item.platform.api == "midjourney" ? "mj" : "sd";
        getStyleModel();
        utils.setStorage("caseInfo", JSON.stringify(item));
        state.outputImages = [];
        state.currentOutIndex = 0;
        state.downloadIng = false;
        state.caseInfo = item;
  
        state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;
        getImgInfo(state.caseInfo.images[0].uri);
        if (state.caseInfo.images && state.caseInfo.images.length > 1) {
          state.outputImages = state.caseInfo.images.map((v) => {
            return v.origin_uri;
          });
        }
        state.styleIndex = state.styleModelList.findIndex(
          (v) => v.id == item.model_id
        );
        getParamsList(item.model_id);
        getVocabularyList();
      };
  
      const batchConsumeCount = () => {
        request
          .get("/work_ai", "/ai/generate/imageNumberFields", {})
          .then((res) => {
            state.mateConsume = res.result;
          });
      };
  
      const getImgInfo = (src) => {
        let img = new Image();
        img.src = src;
        img.onload = () => {
          if (img.width >= img.height) {
            state.fitWidth = true;
          } else {
            state.fitWidth = false;
          }
        };
      };
  
      if (
        utils.getStorage("caseInfo") &&
        JSON.parse(utils.getStorage("caseInfo")).id &&
        !route.query.type
      ) {
        state.caseInfo = JSON.parse(utils.getStorage("caseInfo"));
  
        state.caseInfo.collect = state.caseInfo.collection ? 1 : 0;
        getImgInfo(state.caseInfo.images[0].uri);
        if (state.caseInfo.images && state.caseInfo.images.length > 1) {
          state.outputImages = state.caseInfo.images.map((v) => {
            return v.origin_uri;
          });
        }
        getParamsList(state.caseInfo.model_id);
        getVocabularyList();
        getHotModal();
        getStyleModel();
        batchConsumeCount();
      }
  
      // 热门风格
      const getHotModelList = () => {
        return new Promise((resolve, reject) => {
          request
            .get("/work_ai", "/ai/aimodel/hot/list", {})
            .then((res) => {
              state.showDetail = true;
              // getHotModal();
              resolve(res.result);
            })
            .catch((err) => {
              reject(err);
            });
        });
      };
  
      if (route.query.type) {
        state.pageInfo.page = 1;
        state.expandStyle = false;
        state.hideLeft = true;
      }
  
      if (route.query.type == "text2image" || route.query.type == "image2image") {
        utils.removeStorage("caseInfo");
        utils.removeStorage("case_tab");
        state.caseInfo = {};
        state.paramsList = [];
        state.normalParams = [];
        state.baseParams = [];
        state.seniorParams = [];
        state.styleModelList = [];
        state.styleIndex = -1;
        getStyleModel();
      } else if (route.query.type) {
        getHotModelList().then((res) => {
          res.map((item) => {
            if (item.id == route.query.type) {
              state.caseInfo = {};
              state.downloadIng = false;
              state.outputImages = [];
              state.caseInfo.platform_id = item.platform_id;
              state.caseInfo.model_id = item.id;
              state.caseInfo.feature_id = item.feature_id;
              state.caseInfo.feature = item.feature;
              getParamsList(item.id);
              getVocabularyList();
            }
          });
        });
      } else if (!utils.getStorage("caseInfo")) {
        getStyleModel();
      }
  
      // 获取消耗次数匹配列表
      batchConsumeCount();
  
      watch(
        () => route.query.type,
        (val) => {
          if (val) {
            utils.removeStorage("caseInfo");
            utils.removeStorage("case_tab");
            state.caseInfo = {};
            state.paramsList = [];
            state.normalParams = [];
            state.baseParams = [];
            state.seniorParams = [];
            state.styleModelList = [];
            state.styleIndex = -1;
            state.pageInfo.page = 1;
            state.expandStyle = false;
            if (val == "text2image" || val == "image2image") {
              getStyleModel();
            } else {
              getHotModelList().then((res) => {
                res.map((item) => {
                  if (item.id == val) {
                    state.caseInfo = {};
                    state.downloadIng = false;
                    state.outputImages = [];
                    state.caseInfo.platform_id = item.platform_id;
                    state.caseInfo.model_id = item.id;
                    state.caseInfo.feature_id = item.feature_id;
                    state.caseInfo.feature = item.feature;
                    getParamsList(item.id);
                    getVocabularyList();
                  }
                });
              });
            }
          }
        }
      );
  
      const consumeCountNum = computed(() => {
        const arr = [
          ...state.normalParams,
          ...state.baseParams,
          ...state.seniorParams,
        ];
  
        let result = arr.find(
          (v) => state.mateConsume.indexOf(v.param_name) != -1
        );
  
        if (result) {
          return result.param_varlue;
        }
  
        return 1;
      });
  
      const disclaimerClick = () => {
        if (state.disclaimer_url) {
          window.open(state.disclaimer_url, "_blank");
        } else {
          request.get("/work_ai", "/config").then((res) => {
            if (res.list) {
              state.disclaimer_url = res.list.disclaimer_url;
              window.open(state.disclaimer_url, "_blank");
            }
          });
        }
      };
      const imgObj = computed(() => {
        let url = "";
        if (
          state.outputImages.length > 0 &&
          state.outputImages[state.currentOutIndex]
        ) {
          url = state.outputImages[state.currentOutIndex];
        } else if (
          state.currentPage == 0 &&
          state.caseInfo.images &&
          state.caseInfo.images[0].origin_uri &&
          state.caseInfo.id
        ) {
          url = state.caseInfo.images && state.caseInfo.images[0].origin_uri;
        } else if (
          state.currentPage > 0 &&
          state.caseInfo.third_image &&
          state.caseInfo.third_image.length
        ) {
          url =
            state.caseInfo.third_image[state.currentPage] &&
            state.caseInfo.third_image[state.currentPage].url;
        } else {
          url = state.outputImages[state.currentOutIndex];
        }
        return url;
      });
      const getWHStyle = (val) => {
        let obj = {};
  
        if (val == "1:1") {
          obj = { width: "50%", height: "50%" };
        } else if (val == "3:4") {
          obj = { width: "30%", height: "40%" };
        } else if (val == "4:3") {
          obj = { width: "40%", height: "30%" };
        } else if (val == "9:16") {
          obj = { width: "30%", height: (16 / 3) * 10 + "%" };
        } else if (val == "16:9") {
          obj = { width: (16 / 3) * 10 + "%", height: "30%" };
        }
        return obj;
      };
      const changeScaleMode = (item, tItem) => {
        item.param_varlue = tItem;
      };
      const pageChange = (tIndex) => {
        state.currentPage = tIndex;
        // if(state.caseInfo.third_image&&state.caseInfo.third_image.length>1){
  
        //   state.currentPage = tIndex
        // }else{
  
        //   getThirdImgs(state.caseInfo.id,tIndex)
        // }
      };
      let controller = ref(new AbortController());
      let BASE_URL = defaultSetting.requestDomain;
      if (process.env.NODE_ENV === "development") {
        BASE_URL = BASE_URL + "/api";
      }
      const getPrompts = async (item) => {
        if (!item.param_varlue) {
          return;
        }
        state.btnLoading = true;
        const abortSignal = new AbortController();
        controller.value = abortSignal;
        let prompt = "";
        const { responseText } = await streamFetch({
          url: `${BASE_URL}//work_ai/ai/generate/prompt`,
  
          data: {
            org_id: utils.getOrgId(),
            user_token: utils.getToken(),
            prompt: item.param_varlue,
          },
          onMessage: (text) => {
            console.log(text);
            state.btnLoading = false;
            if (utils.isJSONStr(text)) {
              //这里有错误
              let res = JSON.parse(text);
  
              if (utils.isObject(res) && res.msg) {
                message.error(res.msg);
  
                return;
              }
            }
  
            if (prompt == "" && item.param_varlue != "") {
              item.param_varlue = "";
            }
            prompt += text;
            item.param_varlue = prompt;
          },
          abortSignal,
        }).catch((e) => {
          state.btnLoading = false;
          return {
            responseText: false,
          };
        });
  
        if (responseText) {
          item.param_varlue = responseText;
        }
      };
      // 获取mj生成后，异步裁剪的四张图片
      const getThirdImgs = (case_id, tIndex) => {
        state.tLoading = true;
        request
          .post("/work_ai", "/user/image/case/crop", {
            case_id,
          })
          .then((res) => {
            state.tLoading = false;
            state.outputImages = [];
            if (state.caseInfo.images[0].origin_uri) {
              let imgs = res?.result ?? [];
              let img = {
                id: state.caseInfo.id,
                url: state.caseInfo.images[0].origin_uri,
              };
              imgs.splice(0, 0, img);
  
              state.caseInfo.third_image = imgs;
              nextTick(() => {
                state.currentPage = tIndex;
              });
            }
          })
          .catch((err) => {
            state.tLoading = false;
            message.error(err.msg);
          });
      };
      if (utils.getStorage("case_tab")) {
        state.imageTabIndex = 2;
        getMyCreate();
      }
  
      //调用接口放大图片
      const biggerImage = (index) => {
        state.currentBiggerImgIndex = index;
        let currentImg = state.caseInfo.third_image[index];
        // 如果已经生成过大图了，无需请求接口
        if (currentImg.up_url) {
          state.imgVisible = true;
          return;
        }
        let params = {
          case_id: state.caseInfo.id,
          action_key: currentImg?.key ?? "",
        };
        let teamId = store.state.user.teamId;
        if (teamId) {
          params.team_id = teamId;
        }
        state.tLoading = true;
        request
          .post("/work_ai", "/user/image/case/upsample", params)
          .then((res) => {
            if (res.result.status == "error") {
              message.error(res.result.message);
              state.tLoading = false;
              return;
            }
            let params = {};
            params.resource_id = res.result.resource_id;
            params.action_key = currentImg?.key ?? "";
            utils.modalConfirm({
              title: "提示",
              content: "图片生成中...",
              cancelText: "关闭",
              okText: "确定等待",
              onOk: () => {
                biggerImageInterver(params, index);
              },
              onCancel: () => {
                state.tLoading = false;
              },
            });
          })
          .catch((err) => {
            state.tLoading = false;
          });
      };
      // 图片放大轮询
      const biggerImageInterver = (params) => {
        request
          .get("/work_ai", "/user/case/upsample/result", params)
          .then((res) => {
            if (res.result.status != true) {
              let obj = {};
              Object.assign(obj, params);
  
              let timeout = setTimeout(() => {
                biggerImageInterver(obj);
                clearTimeout(timeout);
              }, 1500);
            }
            if (res.result.status == true) {
              if (state.caseInfo.id) {
                getCaseInfo(state.caseInfo.id, true);
              }
              state.tLoading = false;
  
              message.success("生成完成！");
            }
  
            if (res.result.status == "failed" || res.result.status == "error") {
              message.error(res.result.error);
              state.tLoading = false;
            }
          })
          .catch((err) => {});
      };
      const currentBiggerImgUrl = computed(() => {
        return state.caseInfo.third_image
          ? state.caseInfo.third_image[state.currentBiggerImgIndex]?.up_url ?? ""
          : "";
      });
  
      const adjustImage = (index) => {
        let currentImg = state.caseInfo.third_image[index];
        let params = {
          case_id: state.caseInfo.id,
          action_key: currentImg?.key ?? "",
        };
        let teamId = store.state.user.teamId;
        if (teamId) {
          params.team_id = teamId;
        }
        state.tLoading = true;
        state.isGenerate = true;
        state.imageLoading = true;
        request
          .post("/work_ai", "/user/image/case/variation", params)
          .then((res) => {
            if (res.result.status == "error") {
              message.error(res.result.message);
              state.isGenerate = false;
              state.imageLoading = false;
              state.tLoading = false;
              return;
            }
  
            let params = {};
            params.replicateId = res.result.id;
            params.modelId = state.caseInfo.model_id;
            params.featureId = state.caseInfo.feature_id;
            params.platformId = state.caseInfo.platform_id;
            state.caseId = res.result.caseId;
            state.caseInfo.id = res.result.caseId;
  
            utils.modalConfirm({
              title: "提示",
              content: "绘画任务正在排队制作中，生成后将在我的作品中展示",
              cancelText: "我的作品",
              okText: "确定等待",
              onOk: () => {
                getResult(params, true);
              },
              onCancel: () => {
                state.isGenerate = false;
                state.imageLoading = false;
                state.tLoading = false;
                tabChange(2);
              },
            });
          });
      };
  
      // 判断作品是生成中还是生成错误
      const judgeStatus = (status) => {
        let text = "图片生成中...";
        if (status == "starting" || status == "processing" || status == "queue") {
          text = "图片生成中..."; //生成中
        } else if (
          status == "failed" ||
          status == "canceled" ||
          status == "error"
        ) {
          text = "图片生成失败"; //生成失败
        } else {
          text = ""; //成功
        }
        return text;
      };
      const selectNiji = (item, val) => {
        item.param_varlue = val;
      };
      return {
        ...toRefs(state),
        searchThis,
        tabChange,
        handleUploadChange,
        beforeUpload,
        generateImage,
        tagTabChange,
        chooseTagsItems,
        inputChange,
        makeSame,
        deleteCollect,
        handleScrollChange,
        downloadThis,
        chooseStyle,
        consumeCountNum,
        loginCallback,
        getPromptList,
        chooseRecommad,
        clearPrompt,
        collectClick,
        collectSingleClick,
        middleTopStyle,
        disclaimerClick,
        middleConStyle,
        rightConStyle,
        imgObj,
        modeTabChange,
        getWHStyle,
        changeScaleMode,
        pageChange,
        getPrompts,
        onChange,
        biggerImage,
        currentBiggerImgUrl,
        adjustImage,
        judgeStatus,
        selectNiji,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
  :deep(.ant-upload.ant-upload-drag .ant-upload) {
    padding: 0;
  }
  
  @marginTop: 15px; // 定义模块之间的间距
  
  .detail_page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  
    .left_con {
      width: 20%;
      height: 100%;
      background: #ffffff;
      padding: 20px;
      flex-shrink: 0;
      transform: translateX(1px);
      .top_title {
        font-size: 14px;
        color: #333333;
  
        .breadcrumb {
          .point {
            cursor: pointer;
          }
        }
      }
  
      .search_con {
        margin-top: @marginTop;
      }
  
      .tab_con {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: @marginTop;
  
        .tab_item {
          font-family: PingFang SC;
          color: #6c737b;
          font-size: 14px;
          cursor: pointer;
  
          &.active {
            font-weight: bold;
            color: #333333;
          }
        }
      }
  
      .tab_main {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
        width: 100%;
        height: calc(100% - 106px);
        overflow-y: scroll;
        margin-top: 5px;
  
        .no_data {
          width: 100%;
          display: flex;
          margin-top: 100px;
          align-items: center;
          justify-content: center;
          color: #999999;
        }
  
        .model_loading {
          width: 100%;
          display: flex;
          margin-top: 100px;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #999999;
        }
  
        &::-webkit-scrollbar {
          width: 0;
        }
  
        .image_item {
          border: 1px solid #dddddd;
          width: 48%;
          height: 240px;
          border-radius: 5px;
          margin-top: 10px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
  
          &:hover {
            .operate_image {
              display: block;
              cursor: pointer;
            }
          }
  
          &:hover {
            .operate_image-cover {
              position: absolute;
              top: 0;
              left: 0;
  
              display: block;
              cursor: pointer;
            }
          }
  
          .operate_image-cover {
            width: 100%;
            height: 100%;
            display: none;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            .delete_collect {
              position: absolute;
              bottom: 10px;
              left: 5%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 5px;
              color: #fff;
              border-radius: 50px;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.1);
            }
          }
  
          .operate_image {
            width: 100%;
            height: 100%;
            display: none;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            position: relative;
  
            .image_title {
              position: absolute;
              left: 5px;
              top: 5px;
              font-size: 14px;
              color: #ffffff;
              display: inline-block;
              width: 95%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
  
            .make_same {
              position: absolute;
              bottom: 10px;
              right: 5%;
              border: 0;
              background-image: linear-gradient(
                to bottom right,
                #938bff,
                #daaefe
              );
              overflow: hidden;
  
              @keyframes light {
                0% {
                  left: -5px;
                }
  
                25% {
                  left: -5px;
                }
  
                50% {
                  left: 57px;
                }
  
                75% {
                  left: 57px;
                }
  
                100% {
                  left: 57px;
                }
              }
  
              &:hover {
                &:after {
                  content: "";
                  height: 25px;
                  width: 15px;
                  display: inline-block;
                  top: 0px;
                  background: hsla(0, 0%, 100%, 0.3);
                  position: absolute;
                  left: -60px;
                  z-index: 2;
                  -webkit-transform: skew(-12deg);
                  transform: skew(-12deg);
                  -webkit-animation: light 1.5s linear;
                  animation: light 1.5s linear;
                }
              }
            }
  
            .my_collect {
              position: absolute;
              bottom: 10px;
              left: 5%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 5px;
              color: #fff;
              border-radius: 50px;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.1);
            }
  
            .delete_collect {
              position: absolute;
              bottom: 10px;
              left: 5%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 5px;
              color: #fff;
              border-radius: 50px;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.1);
            }
  
            .download_this {
              position: absolute;
              bottom: 46px;
              left: 5%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 5px;
              color: #fff;
              border-radius: 50px;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  
    .middle_con {
      width: 60%;
      padding: 0px 20px;
      height: 100%;
  
      .loading_txt {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
  
        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }
  
          to {
            transform: rotate(360deg);
          }
        }
  
        &::before {
          content: "";
          width: 200%;
          height: 200%;
          position: absolute;
          background-color: #938bff;
          z-index: -2;
          left: 50%;
          top: 50%;
          transform-origin: 0 0;
          animation: rotate 2s infinite linear;
          z-index: 1;
        }
  
        &::after {
          content: "";
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          background: rgb(255, 255, 255);
          border-radius: 5px;
          position: absolute;
          left: 2px;
          top: 2px;
          z-index: 1;
        }
      }
  
      .middle_top {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        align-items: center;
        justify-content: center;
  
        .main_image {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding: 20px;
          overflow: hidden;
          .right_operate {
            width: 30px;
            height: 60px;
            background-color: #fff;
            .download_image {
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .collect_image {
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
            }
          }
  
          .image_container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
  
            img {
              width: 200px;
              height: 200px;
              object-fit: cover;
            }
  
            .title {
              color: #333;
              font-size: 16px;
              font-weight: 600;
            }
  
            .desc {
              color: #999;
              margin-top: 10px;
            }
          }
        }
      }
  
      .middle_bottom {
        width: 100%;
        height: 60px;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: scroll;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
  
        .image_item {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          margin-left: 3px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          cursor: pointer;
  
          .choose_image {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            border-radius: 5px;
          }
        }
  
        .save_btn {
          padding: 10px 27px;
          border: 0;
          background: linear-gradient(90deg, #938bff, #ff97f2);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
  
    .right_con {
      width: 20%;
      height: 100%;
  
      .loading_view {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #666;
        font-size: 15px;
      }
  
      .right_top {
        height: calc(100% - 80px);
        overflow-y: scroll;
  
        &::-webkit-scrollbar {
          width: 0;
        }
  
        .normal_params_con {
          background-color: #fff;
          padding: 20px;
          border-radius: 0 0 10px 10px;
          // margin-top: 10px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
  
        .base_params_con {
          background-color: #fff;
          padding: 20px;
          margin-bottom: 10px;
          margin-right: 10px;
          border-radius: 10px;
          .form_item {
            .form_title {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
  
              .left_title {
                font-size: 14px;
                font-weight: 500;
                color: #333333;
              }
  
              .right_con {
                font-size: 12px;
              }
            }
          }
        }
  
        .senior_params_con {
          background-color: #fff;
          padding: 20px;
          margin-bottom: 10px;
          margin-right: 10px;
          border-radius: 10px;
          .form_item {
            .form_title {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 10px;
  
              .left_title {
                font-size: 14px;
                font-weight: 500;
                color: #333333;
              }
  
              .right_con {
                font-size: 12px;
              }
            }
          }
        }
  
        .senior_title {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .left_title {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
          }
  
          .right_con {
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
        }
  
        .base_title {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          .left_title {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
          }
  
          .right_con {
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
        }
  
        .form_item {
          .form_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
  
            .left_title {
              font-size: 14px;
              font-weight: bold;
              color: #333333;
            }
  
            .right_con {
              font-size: 12px;
            }
          }
  
          .form_value {
            margin-top: 5px;
            .upload_con {
              width: 100%;
              padding: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-radius: 5px;
              cursor: pointer;
  
              .upload_txt {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
  
                .text_1 {
                  font-size: 14px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #333333;
                }
  
                .text_2 {
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #999999;
                  margin-top: 5px;
                }
              }
  
              .upload_image {
                width: 60px;
                height: 60px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                border: 1px #dddddd dashed;
              }
            }
  
            .text_area_con {
              width: 100%;
              background-color: #f6f7f9;
              border-radius: 10px;
              padding: 20rpx;
  
              :deep(.ant-input:focus) {
                border: none;
                box-shadow: none;
              }
  
              :deep(.ant-input) {
                &::-webkit-scrollbar {
                  width: 3px;
                }
  
                &::-webkit-scrollbar-thumb {
                  /* 滚动条样式 */
                  -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
                  box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
                  border-radius: 2.5px;
                  background-color: #d9dcdf;
                  opacity: 0.7;
                  transition: opacity ease-in-out 200ms;
                }
              }
  
              .textarea_bottom {
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                border-top: 1px solid #e3e4e5;
                padding: 10px;
              }
            }
  
            .bottom_tips {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 3px;
              padding: 10px 0px;
  
              .refrash_icon {
                color: #999;
  
                &:hover {
                  color: #333;
                  font-weight: bold;
                }
              }
  
              .prompt_title {
                width: 240px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                color: #666666;
  
                .a_link {
                  color: #999;
                  margin-left: 5px;
                  font-size: 12px;
  
                  &:hover {
                    color: #333;
                    font-weight: bold;
                  }
                }
              }
  
              .prompt_loading {
                animation: change linear 1s infinite;
              }
  
              @keyframes change {
                from {
                  transform: rotate(0deg);
                }
  
                to {
                  transform: rotate(720deg);
                }
              }
            }
          }
  
          .line {
            width: 100%;
            height: 1px;
            border: 0;
            background-color: #dddddd;
            margin: 25px 0;
          }
        }
      }
  
      .bottom_btn {
        padding: 20px;
        width: calc(100% - 10px);
        border-top: 1px solid #dddddd;
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-direction: column;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        .create_btn {
          padding: 6px 27px;
          background: linear-gradient(90deg, #938bff, #ff97f2);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          cursor: pointer;
        }
  
        .consume_tips {
          width: 100%;
          color: #938bff;
        }
  
        .disclaimer-wrap {
          position: absolute;
          top: 8px;
          right: 20px;
          color: #999;
          font-size: 12px;
          cursor: pointer;
  
          &:hover {
            color: @primary-color;
          }
        }
      }
    }
  }
  
  .keywords_con {
    width: 100%;
    height: 600px;
    background: #ffffff;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0px 10px 20px 10px;
  
    &::-webkit-scrollbar {
      width: 0;
    }
  
    .form_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
  
      .left_title {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }
  
      .right_con {
        font-size: 12px;
      }
    }
  
    .tab_list {
      display: flex;
      flex-wrap: wrap;
      transform: translateX(-5px);
  
      .line_height {
        height: 20px;
        width: 100%;
      }
  
      .sub_container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
  
        .sub_item {
          margin-top: 10px;
  
          .label_title {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-left: 5px;
          }
  
          .tags_con {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
  
            .tab_item {
              border-radius: 3px;
              padding: 0px 10px;
              margin: 2px 5px;
              background-color: #fafafa;
              border: 1px solid #999999;
              color: #999999;
              cursor: pointer;
  
              &.active {
                background-color: rgba(147, 139, 255, 0.2);
                border: 1px solid rgba(147, 139, 255, 1);
                color: rgba(147, 139, 255, 1);
              }
            }
          }
        }
      }
  
      .tab_item {
        border-radius: 3px;
        padding: 0px 10px;
        margin: 2px 5px;
        background-color: #fafafa;
        border: 1px solid #999999;
        color: #999999;
        cursor: pointer;
  
        &.active {
          background-color: rgba(147, 139, 255, 0.2);
          border: 1px solid rgba(147, 139, 255, 1);
          color: rgba(147, 139, 255, 1);
        }
      }
    }
  }
  .image_item_img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, #a871ec, #dc7be0);
  
    border-radius: 5px;
    color: #fff;
  }
  .page-wrapper {
    display: flex;
    height: 60px;
    align-items: center;
    width: 100%;
    justify-content: center;
    .page-list {
      display: flex;
      width: 60%;
      justify-content: space-around;
      .page-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        border-radius: 5px;
        width: 100px;
        border: 1px solid #e7e2e2;
        cursor: pointer;
      }
      .active-page {
        background-color: #a871ec;
        color: #fff;
  
        border: 1px solid #a871ec;
      }
    }
  }
  .h-30 {
    height: 30px !important;
  }
  .tab-list {
    display: flex;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 10px 10px 0 0;
  }
  .tab-sd,
  .tab-mj {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 45px;
    background-color: #f6f7f9;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    font-size: 18px;
    color: #aaa;
  }
  .tab-sd {
    // background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
    -webkit-mask: linear-gradient(red, red),
      url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0h-2.344a1 1 0 0 1 .957 1.287L3.855 37.148A4 4 0 0 1 .023 40H16V0z' fill='%23C6F'/%3E%3C/svg%3E")
        right/auto 100% no-repeat;
    -webkit-mask-composite: xor;
  }
  .tab-mj {
    // background: linear-gradient(274deg, #5FB6F5 -3.81%, #4B80EE 62.98%);
    -webkit-mask: linear-gradient(red, red),
      url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40h2.344a1 1 0 0 1-.957-1.287L12.145 2.85A4 4 0 0 1 15.977 0H0v40z' fill='%23C6F'/%3E%3C/svg%3E")
        left/auto 100% no-repeat;
    -webkit-mask-composite: xor;
  }
  .active-tab {
    background-color: #fff;
    color: #a871ec;
  }
  .scale-list {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .scale-mode {
  }
  .scale-item {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid #ced3dc;
    border-radius: 5px;
    color: #aaa;
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
  }
  .bg-purple {
    background-color: #b68ffb;
  }
  .bg-grey {
    background-color: #aaa;
  }
  .br-purple {
    border: 1px solid #b68ffb;
  }
  .carousel-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .carousel-objectFit {
    object-fit: contain;
  }
  
  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    // width: 25px;
    // height: 25px;
    font-size: 25px;
    color: #000;
    // background-color: #000;
  
    right: -50px !important;
    opacity: 0.3;
  }
  .ant-carousel :deep(.slick-prev) {
    left: -50px !important;
  }
  .ant-carousel :deep(.slick-slider) {
    height: 100%;
  }
  .ant-carousel :deep(.slick-list) {
    height: 100%;
  }
  
  .ant-carousel :deep(.slick-track) {
    height: 100%;
  }
  .ant-carousel :deep(.slick-slide div) {
    height: 100%;
  }
  .ant-carousel :deep(.slick-slide img) {
    height: 100% !important;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .operation {
    height: 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .magnify,
  .trimming {
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: space-around;
    height: 25px;
  }
  .color-purple {
    color: #b68ffb;
  }
  .img-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }
  .img-center {
    height: 100%;
    object-fit: contain;
  }
  .mask-close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 30px;
  }
  .style-list-niji {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px; /* 列之间的间隔 */
  }
  .style-item {
    height: 84px;
    position: relative;
  
    border-radius: 6px;
    cursor: pointer;
  }
  .move-box {
    // z-index: 9;
    width: 7px;
    height: 7px;
    border-radius: 50px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: -5px;
    left: -5px;
  
    background-color: #fff;
    box-shadow: 0 0 10px 5px #fff;
    animation: move-box 2s linear infinite;
  }
  
  // move-box动画
  @keyframes move-box {
    25% {
      left: 100%;
      top: -5px;
    }
  
    50% {
      left: 100%;
      top: 84px;
      right: -2px;
    }
  
    75% {
      left: 0;
      top: 80px;
    }
  }
  .example_img {
    border-radius: 10rpx;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .item-bottom-niji {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
  }
  .active-style {
    border: 2px solid #ad72eb;
    border-radius: 8px;
  }
  </style>
  